import React, { Component } from "react";
import 'katex/dist/katex.min.css';
import katex from 'katex';

class AlgorithmHelper extends Component{
  constructor(props){
    super(props);

    this.createDS          = this.createDS.bind(this);
    this.handleDSChanged   = this.handleDSChanged.bind(this);
    this.handleFileChanged = this.handleFileChanged.bind(this);
    this.importModel       = this.importModel.bind(this);
    this.exportModel       = this.exportModel.bind(this);
    this.reset             = this.reset.bind(this);
    this.test              = this.test.bind(this);
    this.train             = this.train.bind(this);

    this.fileInput         = React.createRef();

    this.trainDSList       = [];
  }

  componentDidMount(){
    
  }

  componentDidUpdate(){
    const algorithm = this.props.algorithm;

    if(!algorithm) return;

    const description = algorithm.description;

    const el = document.getElementById('description');
    if(description){
      katex.render(`${description}`, el, { throwOnError: false });
    }
    else{
      el.innerHTML='...';
    }
    // 获取数据集列表
    if(this.props.algorithmImp){
      const imp = this.props.algorithmImp;
      
      let elTrain = document.getElementById('trainDSList');
      elTrain.innerHTML = '';

      if(imp.trainDSList && imp.trainDSList.length > 0){
        elTrain.hidden = false;
        this.updateDSOption(elTrain, imp.trainDSList);
      }else{
        elTrain.hidden = true;
        this.trainDSList = [];
      }
      let elTest = document.getElementById('testDSList');
      elTest.innerHTML = '';
      if(imp.testDSList && imp.testDSList.length > 0){
        elTest.hidden = false;
        this.updateDSOption(elTrain, imp.testDSList);
      }
      else{
        elTest.hidden = true;
        this.testDSList = [];
      }
    }
  }

  updateDSOption(element, opts){
    for(var i = 0, il = opts.length; i < il; i++){
      const opt = document.createElement('option');
      opt.innerText = i;
      element.appendChild(opt)
    }
  }

  algorithmName(){
    const algorithm = this.props.algorithm;
    if(algorithm){
      return algorithm.name;
    }
  }
  
  createDS(event){
    const type = event.target.id;
    if(type === 'trainDS' && this.props.algorithmImp){
      const size = parseInt(document.getElementById('trainSize').value);
      this.props.algorithmImp.createRandomTrain(size);
    }
    else if(type=== 'testDS' && this.props.loadTest){
      this.props.loadTest();
    }
  }

  handleDSChanged(event){
    const id = event.target.id;
    const index = parseInt(event.target.value);
    if(id === 'trainDSList'){
      if(this.props.algorithmImp){
        this.props.algorithmImp.setTrainDS(index);
      }
    }
    else if(id === 'testDSList'){
      if(this.props.algorithmImp){
        this.props.algorithmImp.setTestDS(index);
      }
    }
  }

  handleFileChanged(event){
    let reader = new FileReader();
    reader.onload = (e) => {      
      if(this.props.algorithmImp){
        this.props.algorithmImp.load(e.target.result);
      }
      event.target.value = '';
    };

    reader.readAsText(event.target.files[0]);
  }

  importModel(){
    this.fileInput.current.click();
  }

  exportModel(){
    if(this.props.algorithmImp){
      this.props.algorithmImp.save();
    }
  }

  reset(){
    if(this.props.algorithmImp){
      this.props.algorithmImp.init();
    }
  }

  test(){
    if(this.props.algorithmImp){
      this.props.algorithmImp.test();
    }
  }

  train(){
    if(this.props.algorithmImp){
      this.props.algorithmImp.train();
    }
  }

  render(){
    return (
      <div className="div-flex-column">
        <div className="title">{this.props.algorithm?this.props.algorithm.name:''}</div>
        <div className="al-head">算法描述</div>
        <div className="katex" id='description'>...</div>
        <div className="al-head">
          <label>训练数据</label>
          <input type='number' id='trainSize' defaultValue={3} disabled={!this.props.algorithmImp}></input>
          <button id='trainDS' onClick={this.createDS} disabled={!this.props.algorithmImp}>生成训练集</button>
          <select id='trainDSList' defaultValue={0} onChange={this.handleDSChanged}></select>
          <button onClick={this.train} disabled={!this.props.algorithmImp}>训练</button>
        </div>
        <div className="katex" id='train'>...</div>
        <div className="al-head">
          <label>测试数据</label>
          <input type='number' id='testSize' defaultValue={3}></input>
          <button id='testDS' onClick={this.createDS} disabled={!this.props.algorithmImp}>生成测试集</button>
          <select id='testDSList' defaultValue={0} onChange={this.handleDSChanged}></select>
          <button onClick={this.test} disabled={!this.props.algorithmImp}>测试</button>
        </div>
        <div className="katex" id='test'>...</div>
        <div className="al-head">
          <label>模型数据</label>
          <button onClick={this.reset} disabled={!this.props.algorithmImp}>重置</button>
          <input 
            type='file' 
            multiple={false}
            hidden={true}
            ref={this.fileInput} 
            onChange={this.handleFileChanged} />
          <button onClick={this.importModel} disabled={!this.props.algorithmImp}>导入</button>
          <button onClick={this.exportModel} disabled={!this.props.algorithmImp}>导出</button>
        </div>
        <div className="katex" id='model'>...</div>
        <div className="al-head">图</div>
        <div id='figure'></div>
        <div className="al-head" >表</div>
        <div id='table'></div>
        <div className="al-head">练习题</div>
        <div className="katex" id='exercise'>...</div>
      </div>
    )
  }
}

export default AlgorithmHelper;